<script lang="ts" setup>
import { onMounted, onUnmounted, onUpdated } from "@vue/runtime-core";
import { ref } from "vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import { appNotify, NotifyType } from "./models/app.notify";
import { userService } from "./services/user.service";
import MobileDetect from 'mobile-detect'
const isPageShow = ref(false);
const isHeaderFooter = ref(false);

onMounted(() => {
  appNotify.addListener(
    NotifyType.UpdatedHeaderFooter,
    updatedHeaderFooter,
    "app"
  );
  updatedHeaderFooter();
  init();

  var md = new MobileDetect(window.navigator.userAgent);

  console.log(md.mobile());          // 'Sony'
  console.log(md.phone());           // 'Sony'
  console.log(md.tablet());          // null
  console.log(md.userAgent());       // 'Safari'
  console.log(md.os());              // 'AndroidOS'
  console.log(md.is('iPhone'));      // false
  console.log(md.is('bot'));         // false
  console.log(md.version('Webkit'));         // 534.3
  console.log(md.versionStr('Build'));       // '4.1.A.0.562'
  console.log(md.match('playstation|xbox')); // false
  console.log(md);
});

function init(): void {
  isPageShow.value = false;
  userService.getUserByInfo().then(() => {
    isPageShow.value = true;
  });
}

function updatedHeaderFooter(opt?: NotifyType, msg?: string): void {
  isHeaderFooter.value = msg
    ? msg == "true"
    : !["login"].some((val) => location.hash.includes(val));
}
</script>
<template>
  <div class="root base flex-c" v-if="isPageShow">
    <Header v-if="isHeaderFooter"></Header>
    <main class="main flex-c" id="main">
      <keep-alive include="index">
        <router-view v-slot="{ Component, route }">
          <transition :name="(route.meta?.transitionName as string) || 'fade'">
            <component :is="Component" />
          </transition>
        </router-view>
      </keep-alive>
    </main>
    <n-back-top :right="100" />
    <Footer v-if="isHeaderFooter"></Footer>
  </div>
  <div class="not-scene base flex-c" v-else> 加载中... </div>
  <n-message-provider>
    <n-notification-provider>
      <h-message></h-message>
    </n-notification-provider>
  </n-message-provider>
</template>

<style lang="scss" scoped>
// 占位行
.root {
  // background: #f3f3f3;
  align-content: flex-start;

  .main {
    @media screen and (max-width: 1200px) {
      width: 100%;
    }

    @media screen and (min-width: 1200px) {
      min-width: 1200px;
      width: 1400px;
    }

    flex: 1;
    // padding: 40px;
  }
}

.not-scene {
  justify-content: center;
  font-size: 20px;
}
</style>
